<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="keywords" content="前端,jsliang,bootstrap,企业建站">
  <meta http-equiv="description" content="jsliang 为你打造最好的企业服务">
  <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>登录-jsliang 前端有限公司</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
  <div class="header text-center">
    <nav class="navbar navbar-dark bg-sky navbar-expand-lg sticky-top">
      <a class="navbar-brand" href="index.html">
        <img src="./images/common-logo.png" alt="Logo">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto text-left">
          <li class="nav-item">
            <a class="nav-link" href="index.html">企业首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="consultingBusiness.html">咨询业务</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="valueAddedService.html">增值业务</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="trainingBusiness.html">培训业务</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="mobileApplications.html">移动应用</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="messageBoard.html">留言板</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" action="http://www.baidu.com/baidu" target="_blank">
          <input class="form-control mr-sm-2" type="search" name="word" placeholder="jsliang" aria-label="Search">
          <button class="btn btn-primary my-2 my-sm-0" type="submit">
            <span class="glyphicon glyphicon-search"></span>搜索</button>
        </form>
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link nav-right-link nav-item-active" id="nav-link-register" href="login.html">登录</a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-right-link" id="nav-link-login" href="register.html">注册</a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-right-link" id="nav-link-user" href="javascript:void(0)">用户名</a>
          </li>
        </ul>

      </div>
    </nav>
    <div class="banner">
      <img class="img-fluid" src="./images/common-banner.jpg" alt="广告图">
    </div>
  </div>
  <div class="container">
    <div class="row aside">
      <div class="col-md-2">
        <div class="row">
          <div class="sidebar">
            <ul>
              <li>
                <span class="triangle"></span>
                <a href="login.html" class="text-primary">登录</a>
              </li>
              <li>
                <span class="triangle"></span>
                <a href="register.html">注册</a>
              </li>
            </ul>
          </div>
          <div class="strategic-partner">
            <img src="./images/common-china_tele.png" alt="战略伙伴">
          </div>
        </div>
      </div>
      <div class="col-md-10 content">
        <h4 class="content-nav">
          <span class="text-primary float-left">
            <img src="./images/common-nav-btn.png" alt="小导航图标">&nbsp;用户操作</span>
          <span class="float-right">当前位置：jsliang 前端>登录注册</span>
        </h4>
        <div class="row content-text">
          <div class="col-md-4 card">
            <br>
            <h4 class="text-center">登录账号</h4>
            <div>
              <label for="userName">用户昵称：</label>
              <input maxlength="10" type="text" class="form-control" id="userName" placeholder="请输入用户名" required>
            </div>
            <div>
              <label for="userPassword">账号密码：</label>
              <input maxlength="20" type="password" class="form-control" id="userPassword" placeholder="请输入密码" required>
            </div>
            <br>
            <div class="text-center">
              <button class="btn btn-primary" type="submit" id="login-submit">登录</button>
            </div>
            <br>
          </div>
          <div class="col-md-8">
            <img class="img-fluid" src="./images/common-login&register.png" alt="欢迎登录/注册">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center footer">
    <div class="copyright">
      <p>jsliang 前端有限公司 版权所有</p>
      <p>Copyright@ 2019. ALL Rights Reserved</p>
      <p>友情链接:
        <a target="_blank" class="text-warning" href="https://github.com/LiangJunrong/document-library">梁峻荣的 GitHub</a>
      </p>
    </div>
    <div class="network-security">
      <p>
        <a target="_blank" href="http://www.beianbeian.com/beianxinxi/f9709bb6-0a3e-4863-9ad7-09e616d1ea60.html">粤ICP备16084737号-1</a>
      </p>
    </div>
  </div>

  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/islogin.js"></script>
  <script>
    $(function () {
      $("#login-submit").click(function () {

        let userName = $("#userName").val(); // 用户名
        let userPassword = $("#userPassword").val(); // 密码

        if (!userName) {
          alert("请输入用户名");
          $("#userName").focus();
        } else if (!userPassword) {
          alert("请输入密码");
          $("#userPassword").focus();
        } else if (userName.length > 10) {
          alert("请输入少于 10 位的用户名");
          $("#userName").focus();
        } else if (userPassword.length > 20) {
          alert("请输入少于 20 位的密码");
          $("#userPassword").focus();
        } else {

          $.ajax({
            url: "http://localhost:8888/login",
            type: 'post',
            dataType: 'json',
            data: {
              username: userName,
              password: userPassword
            },
            success: function (res) {
              console.log(res);
              if (res.code == "0") {
                sessionStorage.setItem("id", res.data.id);
                sessionStorage.setItem("userName", res.data.userName);
                alert("登录成功！");
                window.location.href = "./messageBoard.html";
              } else if (res.code == "1") {
                alert("登录失败，密码错误！");
              }
            },
            error: function (err) {
              console.log(err.responseText);
              if (err.responseText == "不存在该用户！") {
                alert("不存在该用户！");
              } else if (err.responseText == "登录失败，用户名为空！") {
                alert("登录失败，用户名为空！");
              } else if (err.responseText == "登录失败，密码为空！") {
                alert("登录失败，密码为空！");
              } else if (err.responseText == "登录失败，姓名过长！") {
                alert("登录失败，姓名过长！");
              } else if (err.responseText == "登录失败，密码过长！") {
                alert("登录失败，密码过长！");
              } else {
                alert("未知错误！");
              }
            }
          })

        }

      })
    })
  </script>
</body>

</html>